<template>
  <!-- 4计划审批 - 关联文档 Tab3 - 文档中心 -->
  <div class="doc-tab3">
    <el-row :gutter="12">
      <el-col :span="4" style="overflow-y: scroll; height: 400px;">
        <el-tree
          class="_tree"
          :data="treeData"
          :props="defaultProps"
          node-key="id"
          :default-checked-keys="[treeNodeId]"
          :default-expanded-keys="[treeNodeId]"
          :highlight-current="true"
          ref="customTree"
          @node-click="handleNodeClick" 
        >
          <span slot-scope="{ node, data }" class="tree-item-title">
            <img v-if="data.icon" :src="data.icon" width="16" height="16">
            <span class="tree_label"> {{ node.label }} </span>
          </span>
        </el-tree>
      </el-col>
      <el-col :span="20">
        <div class="tab-search-part">
          <div class="search-right">
            <el-select class="sel-label" v-model="labelSel">
              <el-option
                v-for="(i,idx) in selectList"
                :key="i.v"
                :label="i.l"
                :value="i.v">
              </el-option>
            </el-select>
            <el-input class="sel-ipt" v-if="labelSel == '0' || labelSel == '2' || labelSel == '4' || labelSel == '5'" v-model="formData.ipt"></el-input>
            <el-select class="sel-ipt" v-if="labelSel == '1'" v-model="formData.sel" clearable>
              <el-option
                v-for="(i,idx) in typeList"
                :key="i.v"
                :label="i.l"
                :value="i.v">
              </el-option>
            </el-select>
            <el-date-picker
              class="sel-date"
              v-if="labelSel == '3' || labelSel == '6'"
              v-model="formData.date"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width:300px;border-radius: 0;">
            </el-date-picker>
            <el-button icon="el-icon-search" @click="queryForm" clearable class="search-btn"></el-button>
          </div>
        </div>
        <selTable 
          ref="selTable"
          v-loading="loading"
          :colConfigs="customColumns"
          :list="tableData"
          :pageNum="page.pageNum"
          :pageSize="page.pageSize"
          :total="page.total"
          tableType="docTab3"
          @getSelectedRow="getSelectedRow"
          @onSelect="getSelectDocs"
        >
        </selTable>
      </el-col>
      <el-col :span="24" class="doc-tab3-bottom" style="padding: 10px 20px;">
        <div v-if="selectedDocs && selectedDocs.length>0" class="tag-list">
          <el-tag v-for="(i,idx) in selectedDocs" :key="idx" type="info" closable @close="delTag(i)" style="margin-right:5px;"> 
            <span> {{i.title}} </span>
            <span v-if="i.userName"> - {{i.userName}} </span>
            <span v-if="i.dateTime"> - {{i.dateTime}} </span>
          </el-tag>
        </div>
        <div v-else class="no-chose">已选择</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { custTree } from "../../js/custTree.js";
import selTable from '../../components/selTable';
import { treeList, docTypeList, docTableCol_3 } from '../../js/staticData';
export default {
  name: "doc-tab3",
  components: { selTable },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name"
      },
      treeData: [],
      labelSel: '0',
      selectList: [
        {l: '名称', v: '0'},
        {l: '内容类型', v: '1'},
        {l: '关键字', v: '2'},
        {l: '创建时间', v: '3'},
        {l: '创建人', v: '4'},
        {l: '发起人', v: '5'},
        {l: '发起日期', v: '6'},
      ],
      formData: {
        ipt: '',
        sel: '',
        date: []
      },
      loading: false,
      tableData: [],
      customColumns: [],
      page: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      treeNodeId: '0',
      selectedDocs: [],
    }
  },
  props: {},
  watch: {
    treeNodeId(n) {
      if(n) {
        this.loading = true;
        if(treeList.filter((i) => i.id == n).length) {
          this.tableData = treeList.filter((i) => i.id == n)[0].list;
        }
        this.$refs.customTree.setCurrentKey(n);
        setTimeout(() => {
          this.loading = false;
        }, 200)
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.treeData = custTree(treeList);
      this.typeList = docTypeList;
      this.customColumns = docTableCol_3;
      this.tableData = treeList.filter((i) => i.id == this.treeNodeId)[0].list;
    })
  },
  methods: {
    /**
     * @author Wrl
     * 点击树形控件
     */
    handleNodeClick(data) {
      this.treeNodeId = data.id;
    },
    /**
     * @author Wrl
     * 删除已选中标签
     */
    delTag(item) {
      let title = item.title;
      let userName = item.userName ? `-${item.userName}` : '';
      let dateTime = item.dateTime ? `-${item.dateTime}` : '';
      this.$confirm(`您确定不再关联“${title}${userName}${dateTime}”吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        this.$refs.selTable.multipleSelection = this.$refs.selTable.multipleSelection.filter(i => i.title == item.title);
        this.$refs.selTable.toggleSelection(this.$refs.selTable.multipleSelection);
        setTimeout(() => {
          this.loading = false;
          document.querySelector('.v-modal').style.display = "none";
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }, 500)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    /**
     * @author Wrl
     * 点击列表 - 查看
     */
    getSelectedRow(data) {
      if(data.type == "文档夹" && data.menuId) {
        this.$refs.customTree.setCurrentKey();
        this.treeNodeId = data.menuId;
        this.$refs.customTree.setCurrentKey(data.menuId);
      }
    },
    /**
     * @author Wrl
     * 列表选中数据
     */
    getSelectDocs(arr) {
      this.selectedDocs = arr;
    },
    /**
     * @author Wrl
     * 查询列表
     */
    queryForm() {
      this.$message.info('开发中。。。')
    },
    /**
     * @author Wrl
     * 刷新
     */
    refresh() {
      this.selectedDocs = [];
      this.$refs.selTable.multipleSelection = [];
    }
  }
}
</script>

<style lang="scss" scoped>
  .doc-tab3 {
    max-height: 500px;
    overflow: hidden;
    .tab-search-part {
      width: 100%;
      display: inline-flex;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 10px;
      .search-right {
        width: 100%;
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
        ::v-deep {
          .sel-label {
            width: 105px;
            .el-input__inner {
              border-radius: 4px 0 0 4px;
            }
          }
          .sel-ipt {
            width: 160px;
            .el-input__inner {
              border-radius: 0;
            }
          }
          .sel-date {
            width: 300px;
            .el-input__inner {
              border-radius: 0;
            }
          }
          .search-btn {
            width: 40px;
            padding: 10px 6px;
            border-radius: 0 4px 4px 0;
          }
        }
      }
    }
    .tree-item-title {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      .tree_label{
        margin-left: 5px;
      }
    }
    .doc-tab3-bottom {
      height: 100px;
      background: #f9f9f9;
      border-top: 1px solid #eeeeee;
      border-bottom: 1px solid #eeeeee;
    }
  }
</style>